<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath(); //web项目的根路径
			String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
					+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title>全部设备</title>
<link rel="stylesheet" href="<%=basePath%>static/layui2.4.5/css/layui.css">
<link rel="stylesheet" href="<%=basePath%>static/font-awesome/css/font-awesome.min.css">
<script src="<%=basePath %>static/jquery/jquery.min.js"></script>
<script src="<%=basePath%>static/layui2.4.5/layui.js"></script>
</head>
<body>
<div class="demoTable">
    IMEI：
    <div class="layui-inline">
        <input class="layui-input" name="imei" id="imei" >
    </div>
    <button class="layui-btn search_btn" data-type="getInfo"id="searchBtn">查询</button>
    <button class="layui-btn" data-type="reload" id="addBtn" onclick="addBtn()">新增</button>
    
</div>

	  
	
	
	<table class="layui-hide" id="device" lay-filter="device"></table>
	
	<script type="text/html" id="device_bar">
  		 <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看详情</a>
  		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	<script type="text/javascript">
	layui.use('form', function(){
		  var form = layui.form;
		  form.on('submit(search)', function(){
			  layer.open({
					type: 2,
				  area: ["500px","600px"],
				  content: 'add'
				});
			  })
		  });
	</script>
	<script type="text/javascript">
		function addBtn(){
			layui.use('layer', function(){
		    	var layer = layui.layer;
				layer.open({
					type: 2,
				  area: ["500px","600px"],
				  content: 'add'
				});
			  });
		}
	</script>
	
	<script type="text/javascript">
	layui.use(['table','laypage'], function(){
		  var table = layui.table
		  ,laypage = layui.laypage
		  
		  table.render({
			    elem: '#device'
			    ,cellMinWidth: 80
			    ,url: '<%= basePath %>getAllDevice' //数据接口
			    ,page: true //开启分页
			    ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
			    ,totalRow: true //开启合计行
			    ,cols: [[{field:'deviceId', width:'10%', title: '序号' ,align: 'center'}
				      ,{field:'deviceName',  width:'20%', title: '设备名', sort: true ,align: 'center'}
				      ,{field:'imei', width:'20%', title: 'IMEI', sort: true ,align: 'center'}
				      ,{field:'activeTime', width:'18%', title: '激活时间',sort: true,align: 'center'}
				      ,{field:'endTime', width:'18%', title: '用户到期', sort: true ,align: 'center'}
				      ,{fixed: 'right',    title:'操作', toolbar: '#device_bar',align: 'center'}
				      
				    ]]
			
				   
				  });
		   $('#searchBtn').on('click',function(){
		      var type = $(this).data('type');
		      active[type] ? active[type].call(this) : '';
		  });
		  // 点击获取数据
		  var  active = {
		getInfo: function () {
		          var imei=$('#imei').val();
		         
		          if (imei !='' || imei != null) {
		              var index = layer.msg('查询中，请稍候...',{icon: 16,time:false,shade:0});
		              setTimeout(function(){
		                  table.reload('device',{
		                      where: {
		                          'imei':imei
		                         
		                      }
		                  });
		                  layer.close(index);
		              },800);
		          } else {
		              table.reload('device',{
		            	  page: {
		              	    curr: 1 //重新从第 1 页开始
		              	  }});
		          }
		        table.reload('device', {
		        	  page: {
		        	    curr: 1 //重新从第 1 页开始
		        	  }});
		      },
		};  
	

			//监听行工具事件
			  table.on('tool(device)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
			    var data = obj.data //获得当前行数据
			    ,layEvent = obj.event; //获得 lay-event 对应的值
			    if(layEvent === 'detail'){
			    	layer.open({
						  type: 2, //样式 查阅文档 
						  area: ['500px', '700px'], //打开的页面的大小
						  fixed: false, //不固定
						  maxmin: true,
						  content:'<%= basePath %>details' ,
						  success:function(layero,index){
							  var iframe = parent.window['layui-layer-iframe' + index];
							  iframe.child(data);
			                }
						});
			    } else if(layEvent === 'del'){
			      layer.confirm('真的删除行么', function(index){
			        obj.del(); //删除对应行（tr）的DOM结构
			        layer.close(index);
			        //向服务端发送删除指令
			        $.ajax({  
			        	type : "get",  //提交方式  
			        	url : "<%=basePath %>deleteUserById",//路径  
			        	data : {  
			        	   "userId": data.userId
			        	},//数据，必须为 Key/Value 格式  
			        	success : function(result) { //返回数据根据结果进行相应的处理 
			        	
			        		if (result.success) { 
			        			layer.msg("删除成功",{icon:6})
			        			$(".layui-laypage-btn").click()
			        			layer.close(index);
			        			
			        			
			        		} else {  
			        			layer.alert("删除失败了")

			        		} 
			        	
			        	},
			        	error:function(result){
			        		layer.alert("某些原因失败了")
			        	}
			        });
			      });
			    } else if(layEvent === 'edit'){
			    	layer.open({
						  type: 2, //样式 查阅文档 
						  area: ['600px', '600px'], //打开的页面的大小
						  fixed: false, //不固定
						  maxmin: true,
						  content:'<%=basePath%>edit' ,
						  success:function(layero,index){
							  var iframe =window['layui-layer-iframe' + index];
							  iframe.child(data)
			              }
						   });
			    }
			  }); 
				});
	
	</script>
</body>
</html>
